@layout("/common/_container.html"){
<style>.checkboxStyle{display:inline-block;width:15px;height:15px;background:#289bd6;border:1px solid #535353;border-radius:5px;vertical-align:middle}.checkboxClass{opacity:0;cursor:pointer;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);}.labelStyle{font-weight:500;margin-left:10px;}#checkboxBox > div{padding:0;}.selection{background:#DCDCDC;}.btnBox{position:fixed;bottom:0;width:100%;padding:10px 0;text-align:center;}.btnBox>button{margin:0;color:white;background:#6090b8;font-size:1em;}.btnBox>button:last-of-type{background:white;color:inherit;border:1px solid #999999}</style>
<div class="ibox float-e-margins">
    <div style="display: none">
        <input type="hidden" id="listManagementValuezw" value="${listManagement.listm1}">
        <input type="hidden" id="listManagementValueyw" value="${listManagement.listm2}">
        <input type="hidden" id="menuNameValue" value="${menuName}">
        <input type="hidden" id="userNameValue" value="${userName}">
        <input type="hidden" id="listEchoValue" value="${listEcho}">
    </div>
    <div>
        <div style="background: #6090b8;color: white;padding: 5px 10px;">列表筛选</div>
        <div><h4 style="color: #FF7E00;padding-left: 15px;">请勾选需要展示在列表上的信息</h4></div>
        <div id="checkboxBox" style="display: flex;flex-flow: wrap;padding-left: 30px;"></div>
        <div class="btnBox">
            <button type="button" class="btn" id="screenSubmission">提交</button>
            <button type="button" class="btn" onclick="parent.layer.close(parent.layer.getFrameIndex(window.name))" >取消</button>
        </div>
    </div>
</div>
<script>
    $(function () {
        var list = $("#listManagementValuezw").val().split("，");
        var list2 = $("#listManagementValueyw").val().split("，");
        var listEcho = $("#listEchoValue").val().split("，");
        for (var i = 0; i < list.length; i++) {
            var checkbox = '<div style="width: 20%">' +
                '<span for="click_'+list[i]+'" class="checkboxStyle"><input class="checkboxClass" type="checkbox" value="'+list2[i]+'" name="about" id="click_'+list[i]+'"></span>' +
                '<label for="click_'+list[i]+'" class="labelStyle">'+list[i]+'</label>' +
                '</div>';
            $("#checkboxBox").append(checkbox);
        }
        if(listEcho != ""){
            $.each(listEcho, function(key, value) {
                $("input[name='about'][value='"+value+"']").attr("checked", true).parent().addClass('selection');
            });
        }
        $("#checkboxBox").on('click', '.checkboxStyle', function () {
            if($(this).hasClass('selection')){
                $(this).removeClass('selection');
            }else {
                $(this).addClass('selection');
            }
        });
        $("#screenSubmission").click(function () {
            var menuName = $("#menuNameValue").val();
            var userName = $("#userNameValue").val()
            var listVal = "";
            $.each($('input:checkbox'), function () {
                if (this.checked) {
                    listVal += $(this).val() + "，";
                }
            });
            $.ajax({
                url: Feng.ctxPath + "/reservation/reservation_updateTable",
                type: "post",
                data: {
                    listx1: listVal,
                    menuName:menuName,
                    userName:userName
                },
                success: function (data) {
                    Feng.success('添加成功!');
                    window.parent.location.reload();
                },
                error: function (data) {
                    alert('权限被限制，请联系管理员!');
                }
            })
        })
    })
</script>
@}